import React from 'react';
import { Route } from 'react-router-dom';
import { Input, Button } from '../components';
class LoginView extends React.Component {

    componentDidMount() {
        this.initData();
    }
    render() {
        const { loginData } = this.props;
        const { isRegister } = loginData;
        console.log('isRegister', isRegister)
        return (
            <div className="login">
                {isRegister ? this.renderRegister() : this.renderLogin()}
            </div>
        )
    }
    initData = () => {

    }
    renderLogin = () => {
        return (
            <form className="col-1" onSubmit={this.onLogin}>
                Username:
        <Input onChange={(e) => this.onLoginChange("username", e.target.value)} />
                Password:
        <Input type="password" onChange={(e) => this.onLoginChange("password", e.target.value)} />
                <Button mStyle="primary" type="Submit">Login</Button>
                <Button style={{ float: "right" }} onClick={this.turnToRegister}>Register</Button>
            </form>
        )
    }
    renderRegister = () => {
        return (
            <form className="col-1" onSubmit={this.onRegister}>
                Username:
                        <Input onChange={(e) => this.onRegisterChange("username", e.target.value)} />
                Password:
                        <Input type="password" onChange={(e) => this.onRegisterChange("password", e.target.value)} />
                Confirm Password:
                        <Input type="password" onChange={(e) => this.onRegisterChange("passwordConfirm", e.target.value)} />
                <Button mStyle="primary" type="Submit">Login</Button>
            </form>
        )
    }
    onLogin = () => {
        const { actions, loginData } = this.props;
        const { loginFormData } = loginData;
        actions.login(loginFormData);
    }
    onRegister = () => {
        const { actions, loginData } = this.props;
        const { registerFormData } = loginData;
        actions.register(registerFormData);
    }
    onLoginChange = (field, value) => {
        const { actions, loginData } = this.props;
        const { loginFormData } = loginData;
        loginFormData[field] = value;
        loginData.loginFormData = loginFormData;
        actions.setState(loginData);
    }
    onRegisterChange = (field, value) => {
        const { actions, loginData } = this.props;
        const { registerFormData } = loginData;
        registerFormData[field] = value;
        loginData.registerFormData = registerFormData;
        actions.setState(loginData);
    }
    turnToRegister = () => {
        const { actions, loginData } = this.props;
        loginData.isRegister = true;
        actions.setState(loginData);
    }
}
export default LoginView;